---
title: Fieldset
description: "`Fieldset` is a component used to group elements such as legends, helper messages, and error messages in a fieldset element."
storybook: components-fieldset--basic
source: components/fieldset
style: components/fieldset/fieldset.style.ts
---

```tsx preview
<Fieldset.Root legend="Contact details">
  <Field.Root label="Name">
    <Input type="text" placeholder="Your name" />
  </Field.Root>

  <Field.Root label="Email address">
    <Input type="email" placeholder="Your email address" />
  </Field.Root>
</Fieldset.Root>
```

## Usage

:::code-group

```tsx [package]
import { Fieldset } from "@yamada-ui/react"
```

```tsx [alias]
import { Fieldset } from "@/components/ui"
```

```tsx [monorepo]
import { Fieldset } from "@workspaces/ui"
```

:::

```tsx
<Fieldset.Root>
  <Fieldset.Legend />
  <Fieldset.Header>
    <Fieldset.Legend />
    <Fieldset.HelperMessage />
  </Fieldset.Header>
  <Fieldset.Content />
  <Fieldset.HelperMessage />
  <Fieldset.ErrorMessage />
</Fieldset.Root>
```

### Change Variant

```tsx preview
<VStack>
  <For each={["plain", "elevated", "outline", "panel"]}>
    {(variant, index) => (
      <Fieldset.Root
        key={index}
        variant={variant}
        helperMessage="Please provide your contact details below."
        legend="Contact details"
      >
        <Field.Root label="Name">
          <Input
            type="text"
            placeholder="Your name"
            bg={["elevated", "panel"].includes(variant) ? "bg" : undefined}
          />
        </Field.Root>

        <Field.Root label="Email address">
          <Input
            type="email"
            placeholder="Your email address"
            bg={["elevated", "panel"].includes(variant) ? "bg" : undefined}
          />
        </Field.Root>
      </Fieldset.Root>
    )}
  </For>
</VStack>
```

### Change Size

```tsx preview
<VStack>
  <For each={["sm", "md", "lg"]}>
    {(size, index) => (
      <Fieldset.Root
        key={index}
        size={size}
        variant="panel"
        helperMessage="Please provide your contact details below."
        legend="Contact details"
      >
        <Field.Root label="Name">
          <Input type="text" placeholder="Your name" bg="bg" />
        </Field.Root>

        <Field.Root label="Email address">
          <Input type="email" placeholder="Your email address" bg="bg" />
        </Field.Root>
      </Fieldset.Root>
    )}
  </For>
</VStack>
```

### Displaying a Helper Message

To display a helper message, set a `ReactNode` to `helperMessage`.

```tsx preview
<Fieldset.Root
  helperMessage="Please provide your contact details below."
  legend="Contact details"
>
  <Field.Root label="Name">
    <Input type="text" placeholder="Your name" />
  </Field.Root>

  <Field.Root label="Email address">
    <Input type="email" placeholder="Your email address" />
  </Field.Root>
</Fieldset.Root>
```

Alternatively, you can customize using `Fieldset.HelperMessage`.

```tsx preview
<Fieldset.Root legend="Contact details">
  <Fieldset.HelperMessage color="warning">
    Please provide your contact details below.
  </Fieldset.HelperMessage>

  <Field.Root label="Name">
    <Input type="text" placeholder="Your name" />
  </Field.Root>

  <Field.Root label="Email address">
    <Input type="email" placeholder="Your email address" />
  </Field.Root>
</Fieldset.Root>
```

### Displaying an Error Message

To display an error message, set `invalid` to `true` and assign a `ReactNode` to `errorMessage`.

```tsx preview
<Fieldset.Root
  errorMessage="Some fields are invalid. Please check them."
  helperMessage="Please provide your contact details below."
  invalid
  legend="Contact details"
>
  <Field.Root label="Name">
    <Input type="text" placeholder="Your name" />
  </Field.Root>

  <Field.Root label="Email address">
    <Input type="email" placeholder="Your email address" />
  </Field.Root>
</Fieldset.Root>
```

Alternatively, you can customize using `Fieldset.ErrorMessage`.

```tsx preview
<Fieldset.Root
  helperMessage="Please provide your contact details below."
  invalid
  legend="Contact details"
>
  <Field.Root label="Name">
    <Input type="text" placeholder="Your name" />
  </Field.Root>

  <Field.Root label="Email address">
    <Input type="email" placeholder="Your email address" />
  </Field.Root>

  <Fieldset.ErrorMessage color="success">
    Some fields are invalid. Please check them.
  </Fieldset.ErrorMessage>
</Fieldset.Root>
```

### Required

To make it required, set `required` to `true`.

```tsx preview
<Fieldset.Root
  disabled
  helperMessage="Please provide your contact details below."
  legend="Contact details"
>
  <Field.Root label="Name">
    <Input type="text" placeholder="Your name" />
  </Field.Root>

  <Field.Root label="Email address">
    <Input type="email" placeholder="Your email address" />
  </Field.Root>
</Fieldset.Root>
```

### Disable

To disable, set `disabled` to `true`.

```tsx preview
<Fieldset.Root
  disabled
  helperMessage="Please provide your contact details below."
  legend="Contact details"
>
  <Field.Root label="Name">
    <Input type="text" placeholder="Your name" />
  </Field.Root>

  <Field.Root label="Email address">
    <Input type="email" placeholder="Your email address" />
  </Field.Root>
</Fieldset.Root>
```

### Read-Only

To make it read-only, set `readOnly` to `true`.

```tsx preview
<Fieldset.Root
  helperMessage="We'll never share your email."
  legend="Email address"
  readOnly
>
  <Field.Root label="Name">
    <Input type="text" placeholder="Your name" />
  </Field.Root>

  <Field.Root label="Email address">
    <Input type="email" placeholder="Your email address" />
  </Field.Root>
</Fieldset.Root>
```

### Invalid

To make the input invalid, set `invalid` to `true`.

```tsx preview
<Fieldset.Root
  legend="Email address"
  helperMessage="We'll never share your email."
  errorMessage="Some fields are invalid. Please check them."
  invalid
>
  <Field.Root label="Name">
    <Input type="text" placeholder="Your name" />
  </Field.Root>

  <Field.Root label="Email address">
    <Input type="email" placeholder="Your email address" />
  </Field.Root>
</Fieldset.Root>
```

### Customize the Legend

To customize the legend, use `Fieldset.Legend`.

```tsx preview
<Fieldset.Root helperMessage="Please provide your contact details below.">
  <Fieldset.Legend color="success">Contact details</Fieldset.Legend>

  <Field.Root label="Name">
    <Input type="text" placeholder="Your name" />
  </Field.Root>

  <Field.Root label="Email address">
    <Input type="email" placeholder="Your email address" />
  </Field.Root>
</Fieldset.Root>
```

### Customize the Header

To customize the header, use `Fieldset.Header`.

```tsx preview
<Fieldset.Root>
  <Fieldset.Header borderBottomWidth="1px" pb="md">
    <Fieldset.Legend>Contact details</Fieldset.Legend>
    <Fieldset.HelperMessage>
      Please provide your contact details below.
    </Fieldset.HelperMessage>
  </Fieldset.Header>

  <Field.Root label="Name">
    <Input type="text" placeholder="Your name" />
  </Field.Root>

  <Field.Root label="Email address">
    <Input type="email" placeholder="Your email address" />
  </Field.Root>
</Fieldset.Root>
```

### Customize the Content

To customize the content, use `Fieldset.Content`.

```tsx preview
<Fieldset.Root
  errorMessage="Some fields are invalid. Please check them."
  helperMessage="Please provide your contact details below."
  invalid
  legend="Contact details"
>
  <Fieldset.Content borderWidth="1px" p="md" rounded="l2">
    <Field.Root label="Name">
      <Input type="text" placeholder="Your name" />
    </Field.Root>

    <Field.Root label="Email address">
      <Input type="email" placeholder="Your email address" />
    </Field.Root>
  </Fieldset.Content>
</Fieldset.Root>
```

## Props

<PropsTable name="fieldset" />

## Accessibility

Currently, this section is being updated due to the migration of v2.
